<template>
	<view class="section_con">
		<view class="top_con">
			<image src="/static/images/ai_banner.png"></image>
			<view class="info">
				<view class="up">您好，我是AI中医健康助理</view>
				<view class="down">根据您的健康档案提供专属建议</view>
			</view>
		</view>
		<view class="search_con">
			<view class="search">
				<u-input :border="false" type="number" placeholder='请搜索医师/专科/科室/疾病' v-model="queryFetch.queryStr" style="width:70%"></u-input>
				<span @click="searchClick()">找医生</span>
			</view>
		</view>
		<view class="doc_con">
			<view class="title">推荐医师</view>
			<view class="list" v-for="(val,index) in doctorList" :key="index">
				<view class="info">
					<image :src="imgHttps + val.doctorImg[0]"></image>
					<view class="info_box">
						<view class="up">
							<view class="name">{{val.doctorName}}</view>
							<view class="tag">{{val.introduction}}</view>
							<!-- <view class="tag">中医基础系</view> -->
						</view>
						<view class="down">
							<view class="star">{{val.title}}</view>
							<!-- <view class="star">三甲</view> -->
						</view>
					</view>
				</view>
				<view class="label">
					<view class="card">
						<image src="/static/images/lable1.png"></image>
						<text>服务</text>
						<span>{{val.serviceCount}}</span>	
					</view>
					<view class="card">
						<image src="/static/images/lable2.png"></image>
						<text>评价</text>
						<span>{{val.ratingCount}}</span>	
					</view>
					<view class="card">
						<image src="/static/images/lable3.png"></image>
						<text>锦旗</text>
						<span>{{val.bannerCount}}</span>	
					</view>
				</view>
				<view class="descraption">
					{{val.expertise}}
				</view>
				<view class="bottom">
					<view class="btn" @click="detail(val)">挂号看诊</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { searchDoctor } from "@/api/consultation";
	export default{
		data(){
			return{
				imgHttps:'https://shop-img.xiangruzy.cn',
				queryFetch:{
					shopCode:'SH1756479678793492393',//门店编号
					departmentCode:'',//科室编号
					queryStr:'',
				},
				doctorList:[]
			}
		},
		onShow() {
			this.getSearchDoctorFun()
		},
		methods:{
			searchClick(){
				console.log(this.queryFetch.queryStr)
				this.getSearchDoctorFun()
			},
			async getSearchDoctorFun(){
				let that = this
				let res = await searchDoctor(that.queryFetch)
				console.log(res)
				if(res.code == 200){
					that.doctorList = res.rows || []
				}
			},
			detail(val){
				uni.navigateTo({
					url:"/pages/tabbar/home/appointment?shopCode=SH1756479678793492393&"+'departmentCode='+val.departmentCode+'&doctorCode='+val.doctorCode
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.section_con{
		width:100%;
		height:100%;
		background: #F8F8F8;
		padding: 31rpx;
		font-family: PingFang SC, PingFang SC;
		.top_con{
			width:100%;
			height:263rpx;
			position: relative;
			margin-bottom: 21rpx;
			image{
				position: absolute;
				width:100%;
				height:100%;
				top:0;
				left:0;
			}
			.info{
				position: absolute;
				top:100rpx;
				left:30rpx;
				font-weight: 400;
				.up{
					margin-bottom: 15rpx;
					font-size: 30rpx;
					color: #000000;
				}
				.down{
					font-size: 26rpx;
					color: #666666;
				}
			}
		}
		.search_con{
			background: #FFFFFF;
			border-radius: 15rpx;
			margin-bottom: 24rpx;
			padding: 37rpx 30rpx;
			.search{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 5rpx 8rpx;
				background: #FFFFFF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 1px solid #7D2527;
				span{
					width:158rpx;
					height:60rpx;
					line-height: 60rpx;
					text-align: center;
					background: #7D2527;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					font-weight: 400;
					font-size: 30rpx;
					color:#fff;
				}
			}
		}
		.doc_con{
			.title{
				font-weight: 600;
				font-size: 34rpx;
				color: #000000;
				margin-bottom: 16rpx;
			}
			.list{
				background: #FFFFFF;
				border-radius: 18rpx;
				margin-bottom: 18rpx;
				padding: 30rpx;
				.info{
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					image{
						width:110rpx;
						height:110rpx;
						border-radius: 50%;
					}
					.info_box{
						padding-left: 24rpx;
						flex: 1;
						.up{
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;
							.name{
								font-weight: 600;
								font-size: 34rpx;
								color: #000000;
								margin-right: 20rpx;
							}
							.tag{
								font-weight: 400;
								font-size: 26rpx;
								color: #000000;
								margin-right: 20rpx;
								flex: 1;
								// 新增以下样式，实现三行超出显示省略号
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
							}
						}
						.down{
							display: flex;
							align-items: center;
							.hospital{
								font-weight: 400;
								font-size: 26rpx;
								color: #000000;
								margin-right: 20rpx;
							}
							.star{
								font-weight: 400;
								font-size: 26rpx;
								color: #43578E;
							}
						}
					}
				}
				.label{
					display: flex;
					padding: 15rpx 31rpx;
					background: #F5F4EC;
					border-radius: 5rpx 5rpx 5rpx 5rpx;
					margin-bottom: 18rpx;
					.card{
						flex: 1;
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 26rpx;
						text{
							color: #333333;
							margin-right: 15rpx;
						}
						span{
							color:#7D2527;
						}
						image{
							width:26rpx;
							height:27rpx;
							margin-right: 10rpx;
						}
					}
				}
				.descraption{
					margin-bottom: 22rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
					// 新增以下样式，实现三行超出显示省略号
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
				}
				.bottom{
					display: flex;
					justify-content: flex-end;
					.btn{
						width:205rpx;
						height:60rpx;
						line-height: 60rpx;
						text-align: center;
						background: #7D2527;
						border-radius: 50rpx;
						font-weight: 400;
						color:#fff;
						font-size: 35rpx;
					}
				}
			}
		}
	}
</style>